// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/FontAwesome';
import * as ActionTypes from '../../constants/constants.js'

// antd 按需加载
import { Portal, Toast, Tag } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { getData, addShopCart } from './module/module.js'
import { getShopCartList } from '../ShoppingCart/module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, RefreshScrollView, RnImage } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth } from '../../util/utils.js'

class MagazineDetails extends Component {
  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      active: 0,
    }
  }

  componentDidMount() {
  }

  handleSubmitMagazine() {
    const { details } = this.props
    const { active } = this.state
    const { skuStockList, ...detail } = details
    Actions.submitMagazine({
      details: {
        ...detail,
        skuStock: skuStockList[active]
      }
    })
  }

  render() {
    const { details } = this.props
    const { active } = this.state
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          type="bright"
          title="商品详情"
          back={true}
        />
        <View style={{ flex: 1 }}>
          <View style={{
          }}>
            <RnImage style={{ width: ScreenWidth, height: ScreenWidth }} uri={details.pic} />
          </View>
          <View style={{
          }}>
            <View style={{ padding: 10 }}>
              <Text style={{ fontSize: 16, color: '#333', lineHeight: 24 }}>{details.name}</Text>
            </View>
            <View style={{ padding: 10 }}>
              <Text style={{ fontSize: 16, color: '#f23030', lineHeight: 24 }}>RM {details.skuStockList[active].price}</Text>
            </View>
            <View style={{
              padding: 10,
              flexDirection: 'row',
            }}>
              {details.skuStockList.map((item, index) => {
                let style = {
                  borderColor: '#ddd',
                  backgroundColor: '#fff',
                }
                let text = {
                  fontSize: 14,
                  color: '#61676F',
                  lineHeight: 16,
                }
                if (index == active) {
                  style = {
                    borderColor: '#f23030',
                    backgroundColor: '#f23030',
                  }
                  text = {
                    fontSize: 14,
                    color: '#fff',
                    lineHeight: 16,
                  }
                }
                return (
                  <TouchableOpacity
                    key={index}
                    style={[{
                      padding: 10,
                      borderWidth: .5,
                      borderStyle: 'solid',
                      marginRight: 15,
                      borderRadius: 6
                    }, style]}
                    onPress={() => {
                      this.setState({
                        active: index
                      })
                    }}
                  >
                    <Text style={text}>{item.title}</Text>
                  </TouchableOpacity>)
              })}
            </View>
          </View>
        </View>
        <View style={{
          flexDirection: 'row',
          height: 49,
          borderTopWidth: .5,
          borderStyle: 'solid',
          borderColor: '#ddd'
        }}>
          <TouchableOpacity
            style={{
              flex: 1,
              height: 49,
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: '#ff4f18'
            }}
            onPress={() => {
              this.handleSubmitMagazine()
            }}
          >
            <Text style={{ fontSize: 14, color: '#fff', lineHeight: 49, textAlign: 'center' }}>加入订购</Text>
          </TouchableOpacity>
        </View>
      </View >
    );
  }
}

export default connect(({ }) => ({

}))(pureRender(MagazineDetails))
